<template>
    <!--    搜索条件框-->
    <div class="cardContent">
        <a-radio-group v-model:value="searchData.type" @change="radioChange" button-style="solid">
            <a-radio-button :value="null">全部</a-radio-button>
            <a-radio-button :value="0">工资</a-radio-button>
            <a-radio-button :value="1">研发拨款</a-radio-button>
            <a-radio-button :value="2">生产成本</a-radio-button>
            <a-radio-button :value="3">销售金额</a-radio-button>
        </a-radio-group>
    </div>
    <a-row>
        <a-col :span="14">
            <!--    列表展示-->
            <div class="cardContent">
                <a-list
                        item-layout="horizontal"
                        size="large"
                        :data-source="financeList"
                >
                    <template #renderItem="{ item, index }">
                        <a-list-item>
                            <a-list-item-meta>
                                <template #title>
                                    {{ item.type == 0 ? '工资' : (item.type == 1 ? '研发拨款' : (item.type == 2 ? '生产成本' :
                                    '销售金额')) }}
                                </template>
                                <template #description>
                                    <div v-if="item.type == 0" style="color: red">
                                        发放员工薪资支出：{{item.amount}}元
                                    </div>
                                    <div v-if="item.type == 1" style="color: red">
                                        研发经费支出：{{item.amount}}元
                                    </div>
                                    <div v-if="item.type == 2" style="color: red">
                                        生产成本支出：{{item.amount}}元
                                    </div>
                                    <div v-if="item.type == 3" style="color: green">
                                        销售产品收入：{{item.amount}}元
                                    </div>
                                </template>
                            </a-list-item-meta>
                            <div>
                                {{formatDate(item.createDate)}}
                            </div>
                        </a-list-item>
                    </template>
                    <template #footer>
                        <a-config-provider :locale="locale">
                            <a-pagination
                                    v-model:current="pagination.current"
                                    v-model:pageSize="pagination.pageSize"
                                    show-quick-jumper
                                    show-size-changer
                                    :total="pagination.total"
                                    :show-total="total => `总 ${total} 条数据`"
                                    :page-size-options="pageSizeOptions"
                                    @change="onChange"/>
                        </a-config-provider>
                    </template>
                </a-list>
            </div>
        </a-col>
        <a-col :span="10">
            <div class="cardContent" style="height: 100%">
                <div id="financeInfo" style="width: 100%;height: 400px"></div>
            </div>
        </a-col>
    </a-row>
</template>

<script>
    import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
    import {onMounted, ref} from "vue";
    import axios from "axios";
    import dayjs from "dayjs";
    import * as echarts from "echarts";

    export default {
        name: "FinanceInfo",
        setup() {
            const locale = zhCN
            const searchData = ref({
                type: null
            })
            const financeList = ref([])
            const pagination = ref({
                current: 1,
                pageSize: 5,
            })
            const pageSizeOptions = ref(['5', '10', '20', '30', '50', '100'])

            const load = (pageNum) => {
                pagination.value.current = pageNum == 1 ? 1 : pagination.value.current
                axios.get('/finance/queryByCondition', {
                    params: {
                        pageNum: pagination.value.current,
                        pageSize: pagination.value.pageSize,
                        type: searchData.value.type
                    }
                }).then(rs => {
                    console.log("查找结果：", rs)
                    financeList.value = rs.data.records
                    pagination.value.total = rs.data.total
                })
            }

            const onChange = (pageNum, pageSize) => {
                pagination.value.current = pageNum
                pagination.value.pageSize = pageSize
                load()
            }

            const formatDate = (time) => {
                return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
            }

            const radioChange = (e) => {
                // console.log("e", e)
                searchData.value.type = e.target.value
                load(1)
            }

            const financeInfo = (financeTypeList) => {
                // 基于准备好的dom，初始化echarts实例
                const myChart = echarts.init(document.getElementById('financeInfo'));
                const option = {
                    title: {
                        text: '财务各类别金额明细',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: '金额',
                            type: 'pie',
                            radius: '50%',
                            data: financeTypeList,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                // 绘制图表
                myChart.setOption(option);
            }

            const getAllFinance = () => {
                axios.get('finance/queryAll').then(rs => {
                    const financeTypeList = ref([])
                    for (let i = 0; i < 4; i++){
                        financeTypeList.value.push({
                            value: 0,
                            name: i == 0 ? '工资' : (i == 1 ? '研发拨款' : (i == 2 ? '生产成本' : '销售金额'))
                        })
                    }
                    rs.data.forEach((val, i) => {
                        financeTypeList.value[val.type].value += val.amount
                    })
                    console.log("财务详情aaa：",financeTypeList)
                    financeInfo(financeTypeList.value)
                })
            }

            onMounted(() => {
                load()
                getAllFinance()
            })
            return {
                financeList,
                pagination,
                pageSizeOptions,
                onChange,
                load,
                locale,
                searchData,
                formatDate,
                radioChange
            }
        }
    }
</script>

<style scoped>
    .cardContent {
        background: #fff;
        margin: 10px 10px 0 10px;
        padding: 15px;
    }
</style>